<template>
	<u-navbar :placeholder="true" :bgColor="bgColor" :fixed="true" :border="border">
		<view slot="left" @click="leftClick">
			<slot name="left" v-if="leftcustom"></slot>
			<u-icon v-else class="" name="arrow-left" color="#fff" size="24"></u-icon>
		</view>
		<template slot="center">
			<slot name="title"><view slot="center" class="header-title u-line-1" :style="{color:fontColor}">{{title}}</view></slot>
		</template>
		<view slot="right" @click="rightClick">
			<slot name="right"></slot>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		name: "navBar",
		props:{
			title:{type:String,default:'古诗词'},
			autoBack:{type:Boolean,default:true},//是否自动返回上一页 默认为true
			bgColor:{type:String,default:"#333333"},//背景色
			// bgColor:{type:String,default:"#4590FF"},//背景色
			fontColor:{type:String,default:'#fff'},//字体颜色
			border:{type:Boolean,default:true},//	导航栏底部是否显示下边框
			leftcustom:{type:Boolean,default:false},//左侧是否自定义默认显示返回按钮
		},
		data() {
			return {

			};
		},
		methods: {
			// 点击左侧区域
			leftClick() {
				// 如果配置了autoBack，自动返回上一页
				this.$emit('leftClick')
				if (this.autoBack) {
					uni.$u.route({
						type: 'navigateBack'
					})
				}
			},
			// 点击右侧区域
			rightClick() {
				this.$emit('rightClick')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header-title{
		font-size: $uni-font-size-lg;
		// font-weight: 700;
		letter-spacing: 2rpx;
	}

</style>
